<template>
	<view>
		<view class="box">
			<view class="box-header">
				<view class="box-header-label">微信号</view>
				<view class="box-header-nums">
					<input type="text" v-model="form.wechat_number" placeholder-class="ac" placeholder="请输入">
				</view>
			</view>
			<view class="box-layout">
				<view class="box-layout-tx">微信二维码图像</view>
				<view class="box-layout-r">
					<view @click="delImg">删除</view>
					<view @click="selectClick">重新上传</view>
				</view>
			</view>
			<image :src="form.WeChat_QR_code" mode="" mode="widthFix"></image>
		</view>
		<view class="form-btn" @click="submit">保存</view>
		<u-gap :height="50"></u-gap>
	</view>
</template>

<script>
	import {
		InformationWxDetails,
		InformationWxeditWx
	} from '@/common/http/api.js'
	import {
		uploadImg,
		uploadDel
	} from '@/common/upload.js'
	export default {
		data() {
			return {
				form: {
					wechat_number: '',
					WeChat_QR_code: ''
				},
				id:''
			};
		},
		onLoad(e) {
			if (e.id) {
				this.id = e.id
			}
		},
		onShow() {
			uni.showLoading()
			InformationWxDetails().then(res => {
				uni.hideLoading()
				this.form.wechat_number = res.data.wechat_number
				this.form.WeChat_QR_code = res.data.WeChat_QR_code
			})
		},
		methods: {
			submit(){
				// if(this.form.wechat_number === '') {
				// 	uni.showToast({duration:3000,
				// 		title:'请输入微信号',
				// 		icon:'none'
				// 	})
				// 	return
				// }
				let data = {
					...this.form
				}
				uni.showLoading()
				InformationWxeditWx(data).then(res => {
					uni.hideLoading()
					uni.showToast({duration:3000,
						title:'保存成功!',
						icon:'none'
					})
					uni.navigateBack()
				})
			},
			delImg() {
				if (this.form.WeChat_QR_code === '') {
					uni.showToast({duration:3000,
						title: '请上传！',
						icon: 'none'
					})
					return
				}
				uploadDel(this.form.WeChat_QR_code).then(res => {
					this.form.WeChat_QR_code = ''
				})
			},
			// 上传
			selectClick(e) {
				console.log('e', e)
				uploadImg().then(res => {
					console.log('上传', res)
					this.form.WeChat_QR_code = res.data.url
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7F8;
	}

	.box {
		width: 690rpx;
		padding: 40rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto;

		.box-header {
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #999999;
			padding-bottom: 42rpx;
			margin-bottom: 42rpx;

			.box-header-label {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #292929;
			}

			.box-header-nums {
				margin-left: 73rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #292929;
			}
		}

		.box-layout {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 28rpx;

			.box-layout-tx {
				font-family: PingFang SC;
				font-weight: 300;
				font-size: 24rpx;
				color: #666666;
			}

			.box-layout-r {
				display: flex;
				align-items: center;

				view {
					font-family: PingFang SC;
					font-weight: 300;
					font-size: 26rpx;
					color: #292929;
				}

				view:first-child {
					padding-right: 29rpx;
					margin-right: 29rpx;
					position: relative;
				}

				view:first-child::after {
					content: "";
					width: 1rpx;
					height: 31rpx;
					background: #292929;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}

		image {
			width: 100%;
		}
	}

	.form-btn {
		margin: 0 auto;
		width: 690rpx;
		height: 80rpx;
		background: #23B97F;
		border-radius: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: white;
		margin-top: 40rpx;
	}
</style>